<template>
  <div class="call_info">
    <div class="call_top" v-if="supplement === 'false' && this.visit_project_purpose.type !== '拜访登记'">
      <div class="time">
        <img src="../../assets/common/calling.svg" alt="" v-if="is_link">
        <img src="../../assets/common/hang.svg" alt="" v-if="!is_link">
        <span>{{ count_down_hours }}:{{ count_down_minute }}:{{ count_down_seconds }}</span>
      </div>
      <div class="btn">
        <el-button class="link" size="mini" type="danger" v-if="is_hang_up" @click="call_hang_up">挂断</el-button>
        <el-button class="hang" size="mini" type="info" v-if="!is_hang_up">已挂断</el-button>
      </div>
      <!-- <span>
          <i class="el-icon-phone-outline"></i>
          <span class="calling" v-if="!is_link">通话结束</span>
          <span class="calling" v-if="is_link">通话中...</span>
          <span class="time">{{ count_down_hours }}:{{ count_down_minute }}:{{ count_down_seconds }}</span>
          <el-button type="danger" v-if="is_hang_up" @click="call_hang_up">挂断</el-button>
          <span v-if="!is_hang_up"
                style="margin-right:28px;font-size: 16px;font-weight: 500;color: #2B3A4F;">已挂断</span>
      </span> -->
    </div>
    <div class="call_contain">
      <div class="contain_left">
        <el-tabs v-model="callContent">
          <el-tab-pane label="标签" name="call_basic_label">
            <div class="question_survey">
              <el-tabs v-model="activeSurvey">
                <el-tab-pane label="基础标签" name="basic_label">
                  <div
                    class="options"
                    v-for="(item,index) in visit_basic_list"
                    :key="index">
                    <!-- 文字文本框 -->
                    <div class="text_input" v-if="item.tagType === 'text'">
                      <span>{{ item.tagName }}：</span>
                      <el-input
                        v-model="item.optionName"
                        placeholder="请输入内容"
                        @input="changeTextInput(item.optionName)">
                      </el-input>
                    </div>
                    <!-- 数字文本框 -->
                    <div class="number_input" v-if="item.tagType === 'number'">
                      <span>{{ item.tagName }}：</span>
                      <el-input
                        v-model="item.optionName"
                        placeholder="请输入数字"
                        @input="changeTextInput(item.optionName)">
                      </el-input>
                    </div>
                    <!-- 单选下拉框 -->
                    <div class="radio_select" v-if="item.tagType === 'radio'">
                      <span>{{ item.tagName }}：</span>
                      <el-select
                        clearable
                        v-model="item.chooseRadioTag"
                        placeholder="请选择"
                        @change="changeRadioTag($event,index)">
                        <el-option
                          v-for="val in item.tagBaseOptionBeanList"
                          :key="val.id"
                          :label="val.optionName"
                          :value="val.id"
                          :value-key="val.id">
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 多选下拉框 -->
                    <div class="checkbox_select" v-if="item.tagType === 'checkbox'">
                      <span>{{ item.tagName }}：</span>
                      <el-select
                        v-model="item.chooseCheckTag"
                        multiple
                        collapse-tags
                        style="margin-left: 20px;"
                        placeholder="请选择"
                        @change="changeCheckTag($event,index)">
                        <el-option
                          v-for="val in item.tagBaseOptionBeanList"
                          :key="val.id"
                          :label="val.optionName"
                          :value="val.id"
                          :value-key="val.id">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane
                  :label="visit_project_purpose.projectName"
                  :name="visit_project_purpose.project_id">
                  <div
                    class="options"
                    v-for="(item,index) in visit_product_basic_list"
                    :key="index">
                    <!-- 文字文本框 -->
                    <div class="text_input" v-if="item.tagType === 'text'">
                      <span>{{ item.tagName }}：</span>
                      <el-input
                        v-model="item.optionName"
                        placeholder="请输入内容"
                        @input="changeProductInput(item.optionName)">
                      </el-input>
                    </div>
                    <!-- 数字文本框 -->
                    <div class="number_input" v-if="item.tagType === 'number'">
                      <span>{{ item.tagName }}：</span>
                      <el-input
                        v-model="item.optionName"
                        placeholder="请输入数字"
                        @input="changeProductInput(item.optionName)">
                      </el-input>
                    </div>
                    <!-- 单选下拉框 -->
                    <div class="radio_select" v-if="item.tagType === 'radio'">
                      <span>{{ item.tagName }}：</span>
                      <el-select
                        clearable
                        v-model="item.chooseProductRadioTag"
                        placeholder="请选择"
                        @change="changeProductRadioTag($event,index)">
                        <el-option
                          v-for="val in item.tagProductOptionBeanList"
                          :key="val.id"
                          :label="val.optionName"
                          :value="val.id"
                          :value-key="val.id">
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 多选下拉框 -->
                    <div class="checkbox_select" v-if="item.tagType === 'checkbox'">
                      <span>{{ item.tagName }}：</span>
                      <el-select
                        v-model="item.chooseProductCheckTag"
                        multiple
                        collapse-tags
                        style="margin-left: 20px;"
                        placeholder="请选择"
                        @change="changeProductCheckTag($event,index)">
                        <el-option
                          v-for="val in item.tagProductOptionBeanList"
                          :key="val.id"
                          :label="val.optionName"
                          :value="val.id"
                          :value-key="val.id">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-tab-pane>
          <el-tab-pane label="结束通话" name="end_calls">
            <!-- <div class="title">
              <span>通话结束</span>
            </div>
            <div class="line"></div> -->
            <div class="visit_result">
              <div class="add_visit_record">
                <ul>
                  <li>
                    <div class="purpose">
                      <span class="mandatory">*</span>
                      <span class="text">拜访目的：</span>
                    </div>
                    <span class="purpose_text">{{ visitResult }}</span>
                  </li>
                  <li>
                    <div class="result">
                      <span class="mandatory">*</span>
                      <span class="text">通话结果：</span>
                    </div>
                    <el-checkbox-group v-model="visitResultList">
                      <el-checkbox
                        v-for="item in visit_result"
                        :key="item.resourceValue"
                        :label="item.resourceItem"
                        :disabled="item.disabled"
                        border>
                      </el-checkbox>
                    </el-checkbox-group>
                  </li>
                  <li>
                    <div class="doctor_attitude">
                      <span class="mandatory">*</span>
                      <span class="text">医生态度：</span>
                    </div>
                    <el-rate v-model="attitude"></el-rate>
                  </li>
                  <li>
                    <div class="withae">
                      <span class="mandatory">*</span>
                      <span class="text">是否有AE：</span>
                    </div>
                    <el-select v-model="withae" placeholder="请选择">
                      <el-option
                        v-for="item in withaeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </li>
                  <li v-if="visitRegistration">
                    <div class="call_duration">
                      <span class="text">非平台外呼时长：</span>
                    </div>
                    <el-input style="width: 60px" v-model="callDuration" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="时长"></el-input><span style="font-size: 16px;margin-left: 8px">&nbsp;秒</span>
                  </li>
                  <li>
                    <div class="next_time">
                      <span class="text">下次拜访时间：</span>
                      <el-date-picker
                        v-model="next_time"
                        type="datetime"
                        placeholder="选择日期时间"
                        :picker-options="expireTimeOption">
                      </el-date-picker>
                    </div>
                  </li>
                  <li>
                    <span class="remark_text text"><span>备</span>注：</span>
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="remark"
                      maxlength="1000"
                      show-word-limit>
                    </el-input>
                  </li>
                </ul>
              </div>
              <div class="submit">
                <div v-if="!visitRegistration">
                  <el-button v-if="is_add_info" type="primary" @click="addVisitResult">确定</el-button>
                  <el-button v-else class="disabled_submit" type="primary">确定</el-button>
                </div>
                <div v-if="visitRegistration">
                  <el-button type="primary" @click="addVisitResult">确定</el-button>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="语音识别" name="realTimeTransfer"
                       v-if="supplement === 'false' && this.visit_project_purpose.type !== '拜访登记' && user_info.agentNo == '8000@yundianxiao'">
              <div class="question_survey" style="min-height: 500px;padding: 10px 20px">
                <realTimeTransfer></realTimeTransfer>
              </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="contain_right">
        <basicInfo :is_supplement="is_supplement"/>
      </div>
    </div>
  </div>
</template>

<script>
import {api, baseAjax} from '../../api/api';
import Cookies from 'js-cookie';
import {statusCode} from '../../utils/index';
import {mapState, mapMutations} from "vuex";
import {formatDate} from '../../utils/validate';
import bus from '../../assets/js/eventBus';
import basicInfo from '../../element/basic_info';
import realTimeTransfer from '../../element/realTimeTransfer';

export default {
  components: {
    basicInfo,
    realTimeTransfer
  },
  computed: {
    ...mapState({
      'is_link': state => state.calls.is_link,
      'is_hang_up': state => state.calls.is_hang_up
    })
  },
  data() {
    return {
      doctor_info: {},  //医生信息
      activeSurvey: 'basic_label',
      count_down_hours: '00',
      count_down_minute: '00',
      count_down_seconds: '00',
      hours: 0,
      minute: 0,
      seconds: 0,
      timer: null,
      visitResult: '',   //拜访结果
      result_list: [],
      visitResultList: [],  //选中拜访结果
      visit_result: [],   //拜访结果列表
      attitude: 1,  //医生态度
      withae: '0',  //选中AE
      withaeList: [
        {
          id: '0',
          name: '否'
        },
        {
          id: '1',
          name: '是'
        }
      ],
      next_time: '',   //下次拜访时间
      remark: '',   //备注
      visit_project_purpose: {},  //存储的拜访结果信息
      is_supplement: false,   //是否显示补填信息按钮
      supplement: false,   //是否调用补填接口
      visit_basic_list: [],  //基础标签
      visit_product_basic_list: [],//项目标签
      // basic_label_ary:[],  //基础标签选中值
      // product_label_ary:[],  //项目标签选中值
      is_add_info: true,  //保存按钮是否可点击
      expireTimeOption: {  //设置不能选当前日期之前的日期
        disabledDate(date) {
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
      },
      //拜访登记
      visitRegistration: false,
      callDuration:null,   //非平台外呼时长
      callContent:'call_basic_label',
      //语音转文字切换
      activeName: 'tab',
      //代表信息
      user_info: {}
    }
  },
  watch: {
    visitResultList() {
      //成功招募
      if (this.visitResultList.includes('成功招募')) {
        let arr = []
        this.visit_result.forEach(res => {
          if (res.resourceItem == '医生拒绝') {
            res.disabled = true
          }
          arr.push(res)
        })
        this.visit_result = []
        this.visit_result = arr
      }else {
        let arr = []
        this.visit_result.forEach(res => {
          if (res.resourceItem == '医生拒绝') {
            res.disabled = false
          }
          arr.push(res)
        })
        this.visit_result = []
        this.visit_result = arr
      }
      //医生拒绝
      if (this.visitResultList.includes('医生拒绝')) {
        let arr = []
        this.visit_result.forEach(res => {
          if (res.resourceItem == '成功招募') {
            res.disabled = true
          }
          arr.push(res)
        })
        this.visit_result = []
        this.visit_result = arr
      }else {
        let arr = []
        this.visit_result.forEach(res => {
          if (res.resourceItem == '成功招募') {
            res.disabled = false
          }
          arr.push(res)
        })
        this.visit_result = []
        this.visit_result = arr
      }
    }
  },
  mounted() {
    let that = this;
    this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
    this.doctor_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('doctor_info')));
    this.supplement = Cookies.get('supplement');
    //拨打电话之后的信息/补填信息
    this.visit_project_purpose = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('visit_record_info')));
    if (this.visit_project_purpose && this.visit_project_purpose.type == "拜访登记") {
      this.visitRegistration = true
    }
    this.visit_project_purpose.project_id = '' + this.visit_project_purpose.project_id;
    //处理拜访目的展示
    this.visit_project_purpose.purpose.forEach(item => {
      that.result_list.push(item.resourceItem)
    });
    this.visitResult = this.result_list.length > 1 ? this.result_list.join(',') : this.result_list[0];
    //根据拜访目的获取不同的拜访结果
    if (this.visit_project_purpose.purpose.length === 1 && this.visit_project_purpose.purpose[0].resourceValue === '1') {
      this.getVisitResult('result_type_a');
    } else {
      this.getVisitResult('result_type_b');
    }
    this.countDownTimer();
    this.countDownStop();
    this.get_basic_label();  //基础标签
    this.get_product_label();   //项目标签
  },
  methods: {
    ...mapMutations({
      hang: 'calls/hang'
    }),
    //计时器
    countDownTimer() {
      let that = this;
      this.timer = setInterval(() => {
        if (that.count_down_seconds === '60' || that.seconds === 60) {
          that.count_down_seconds = '00';
          that.seconds = 0;
          if (that.count_down_minute === '60' || that.minute === 60) {
            that.count_down_minute = '00';
            that.minute = 0;
            that.hours++;
            if (that.hours <= 9) {
              that.count_down_hours = '0' + that.hours;
            } else {
              that.count_down_hours = that.hours;
            }
          } else {
            that.minute++;
            if (that.minute <= 9) {
              that.count_down_minute = '0' + that.minute;
            } else {
              that.count_down_minute = that.minute;
            }
          }
        } else {
          that.seconds++;
          if (that.seconds <= 9) {
            that.count_down_seconds = '0' + that.seconds;
          } else {
            that.count_down_seconds = that.seconds;
          }
        }
      }, 1000);
    },
    //关闭计时器
    countDownStop() {
      let that = this;
      let stop_timer = null;
      stop_timer = setInterval(() => {
        if (!that.is_link) {
          clearInterval(that.timer);
          clearInterval(stop_timer);
        }
      }, 50)
    },
    //挂断电话
    call_hang_up() {
      this.hang();
      clearInterval(this.timer);
      this.timer = null;
    },
    //获取拜访结果
    getVisitResult(type) {
      let that = this;
      api.get_resource_item = {
        url: api.get_resource_item_url + type,
        method: api.get_resource_item.method
      };
      baseAjax(api.get_resource_item, '', (res) => {
        if (res.code === statusCode.success) {
          that.visit_result = res.data;
        }
      });
    },
    //添加拜访结果
    addVisitResult() {
      let that = this;
      if (!this.visitResultList.length) {
        this.$alert('请填写拜访结果');
      } else if (!this.attitude) {
        this.$alert('医生态度必填');
      } else if (!this.withae) {
        this.$alert('是否有AE必选');
      }else if(this.callDuration > 10000){
        this.$alert('非平台外呼时长请输入10000以内的数字');
      }else if(this.callDuration < 0){
        this.$alert('非平台外呼时长请输入10000以内的正整数');
      } else {
        let data = {
          attitude: '' + this.attitude,
          callRecordPurpose: this.dealVisitPurpose(),
          callRecordResult: this.dealVisitResult().visitResult,
          dotcorId: this.doctor_info.doctorId,
          isRecruit: this.dealVisitResult().recruit_status,
          memo: this.remark,
          nextCallTime: this.next_time ? formatDate(this.next_time) : '',
          productId: this.visit_project_purpose.project_id,
          withAe: this.withae,
          repId: this.user_info.repId,
          sinToken: this.visit_project_purpose.sinToken,
          tagBaseDoctorOptionBeanList: this.dealBasicLabel().tagBaseDoctorOptionBeanList,
          tagBaseOptionBeanList: this.dealBasicLabel().tagBaseOptionBeanList,
          tagBaseQuateBeanList: this.dealBasicLabel().tagBaseDoctorOptionBeanList,
          tagProductDoctorOptionList: this.dealProductLabel().tagProductDoctorOptionList,
          tagProductOptionBeanList: this.dealProductLabel().tagProductOptionBeanList,
          tagProductQuateBeanList: this.dealProductLabel().tagProductDoctorOptionList,
          tagBaseOptionIdList: this.dealBasicLabel().tagBaseOptionIdList,
          tagProductOptionIdList: this.dealProductLabel().tagProductOptionIdList
        };
        console.log(data)
        if (this.supplement === 'true') {   //补填信息接口
          console.log('补填信息')
          this.supplement_visit_info(data);
        } else if (this.visit_project_purpose && this.visit_project_purpose.type == "拜访登记") {//拜访登记
          data.callDateTime = this.visit_project_purpose.callDateTime;
          data.callDuration = this.callDuration ? Number(this.callDuration) : 0;
          console.log('拜访登记')
          this.submitVisitRegistration(data)
        } else {   //添加拜访结果接口
          console.log('添加拜访结果')
          this.add_result(data);
        }
      }
    },
    //添加拜访结果-拜访目的
    dealVisitPurpose() {
      let that = this;
      let visitPurposeList = [];  //拜访目的
      //拜访目的
      this.visit_project_purpose.purpose.forEach(item => {
        visitPurposeList.push({
          id: item.resourceValue,
          purposeVal: item.resourceItem,
          sinToken: that.visit_project_purpose.sinToken
        });
      });
      return visitPurposeList;
    },
    //添加拜访结果-拜访结果
    dealVisitResult() {
      let that = this;
      let visitResult = [];   //拜访结果
      let recruit_status = '0';
      //拜访结果
      this.visitResultList.forEach(item => {
        that.visit_result.forEach(val => {
          if (item === val.resourceItem) {
            visitResult.push({
              id: val.resourceValue,
              resultVal: val.resourceItem,
              sinToken: that.visit_project_purpose.sinToken
            });
            if (val.resourceValue === '6') {   //成功招募
              recruit_status = '1';
            } else if (val.resourceValue === '3') {  //退出项目
              recruit_status = '2';
            } else if (this.visit_project_purpose.recurit_status == 1) {
              recruit_status = '1';
            }
          }
        });
      });
      return {visitResult, recruit_status};
    },
    //添加拜访结果-基础标签
    dealBasicLabel() {
      let that = this;
      let tagBaseOptionIdList = [];  //基础标签文本框id
      let tagBaseDoctorOptionBeanList = [];  //基础标签-下拉框
      let tagBaseOptionBeanList = [];   //基础标签-文本框
      //基础标签
      this.visit_basic_list.forEach(item => {
        // console.log(item)
        if (item.tagType === 'radio' || item.tagType === 'checkbox') {
          if (item.chooseCheckTag.length) {  //多选
            item.chooseCheckTag.forEach(val => {
              if (val) {
                tagBaseDoctorOptionBeanList.push({
                  doctorId: that.doctor_info.doctorId,
                  optionId: val,
                  repId: that.user_info.repId,
                  sinToken: that.visit_project_purpose.sinToken,
                  sysStatus: '1',
                  tagClassifyId: item.tagClassifyId,
                  tagId: item.id
                });
              }
            });
          } else {  //单选
            if (item.chooseRadioTag) {
              tagBaseDoctorOptionBeanList.push({
                doctorId: that.doctor_info.doctorId,
                optionId: item.chooseRadioTag,
                repId: that.user_info.repId,
                sinToken: that.visit_project_purpose.sinToken,
                sysStatus: '1',
                tagClassifyId: item.tagClassifyId,
                tagId: item.id
              });
            }
          }
          // console.log()
        } else {
          // console.log(item)
          // console.log(item.tagBaseOptionBeanList[0].optionName)
          if (item.optionName) {
            tagBaseDoctorOptionBeanList.push({
              doctorId: that.doctor_info.doctorId,
              optionId: 0,
              repId: that.user_info.repId,
              sinToken: that.visit_project_purpose.sinToken,
              sysStatus: '1',
              tagClassifyId: item.tagClassifyId,
              tagId: item.id
            });

            tagBaseOptionBeanList.push({
              optionName: item.optionName,
              optionType: 'subjective',
              sysStatus: '1',
              tagClassifyId: item.tagClassifyId,
              tagClassifyName: item.tagClassifyName,
              tagId: item.id,
              tagType: item.tagType
            });
            // console.log(tagBaseOptionBeanList)
          }
          if (item.optionId) {
            tagBaseOptionIdList.push(item.optionId);
          }
        }
      });
      // console.log(tagBaseDoctorOptionBeanList)
      // console.log(tagBaseOptionBeanList)
      // console.log(tagBaseOptionIdList)
      return {tagBaseDoctorOptionBeanList, tagBaseOptionBeanList, tagBaseOptionIdList};
    },
    //添加拜访结果-项目标签
    dealProductLabel() {
      let that = this;
      let tagProductOptionIdList = [];   //项目标签id
      let tagProductDoctorOptionList = [];  //项目标签-下拉框
      let tagProductOptionBeanList = [];//项目标签-文本框
      //项目标签
      this.visit_product_basic_list.forEach(item => {
        if (item.tagType === 'radio' || item.tagType === 'checkbox') {
          if (item.chooseProductCheckTag && item.chooseProductCheckTag.length) {  //多选
            item.chooseProductCheckTag.forEach(val => {
              if (val) {
                tagProductDoctorOptionList.push({
                  doctorId: that.doctor_info.doctorId,
                  optionId: val,
                  productId: item.productId,
                  repId: that.user_info.repId,
                  sinToken: that.visit_project_purpose.sinToken,
                  sysStatus: '1',
                  tagClassifyId: item.tagClassifyId,
                  tagId: item.id
                });
              }
            });
          } else {  //单选
            if (item.chooseProductRadioTag) {
              tagProductDoctorOptionList.push({
                doctorId: that.doctor_info.doctorId,
                optionId: item.chooseProductRadioTag,
                productId: item.productId,
                repId: that.user_info.repId,
                sinToken: that.visit_project_purpose.sinToken,
                sysStatus: '1',
                tagClassifyId: item.tagClassifyId,
                tagId: item.id
              });
            }
          }
        } else {
          if (item.optionName) {
            tagProductDoctorOptionList.push({
              doctorId: that.doctor_info.doctorId,
              optionId: 0,
              productId: item.productId,
              repId: that.user_info.repId,
              sinToken: that.visit_project_purpose.sinToken,
              sysStatus: '1',
              tagClassifyId: item.tagClassifyId,
              tagId: item.id
            });

            tagProductOptionBeanList.push({
              optionName: item.optionName,
              optionType: 'subjective',
              productId: item.productId,
              productName: item.productName,
              sysStatus: '1',
              tagId: item.id,
              tagType: item.tagType
            });
          }
          if (item.optionId) {
            tagProductOptionIdList.push(item.optionId);
          }
        }
      });
      // console.log(tagProductDoctorOptionList)
      // console.log(tagProductOptionBeanList)
      // console.log(tagProductOptionIdList)
      return {tagProductDoctorOptionList, tagProductOptionBeanList, tagProductOptionIdList};
    },
    //添加拜访结果接口
    add_result(data) {
      let that = this;
      baseAjax(api.add_visit_record, data, (res) => {
        if (res.code === statusCode.success) {
          that.$store.state.calls.sinToken = '';
          that.$alert('保存成功').then(res => {
            if (res === 'confirm') {
              this.is_add_info = false;
              this.$router.push('/my_customer');
            }
          });
        }
      });
    },
    //补填信息接口
    supplement_visit_info(data) {
      let that = this;
      baseAjax(api.visit_supplementPlus, data, (res) => {
        if (res.code === statusCode.success) {
          that.$store.state.calls.sinToken = '';
          that.$alert('保存成功').then(res => {
            if (res === 'confirm') {
              that.is_add_info = false;
              that.$router.push('/my_customer');
            }
          });
        }
      });
    },
    //基础标签
    get_basic_label() {
      let that = this;
      let tag_base_list = [];
      api.visit_result_basic_label = {
        url: api.visit_result_basic_label_url + '?doctorId=' + this.doctor_info.doctorId,
        method: api.visit_result_basic_label.method
      };
      baseAjax(api.visit_result_basic_label, '', (res) => {
        if (res.code === statusCode.success) {
          res.data.forEach(item => {
            // console.log(item.tagBaseList)
            tag_base_list.push(item.tagBaseList);
          });
          // console.log(tag_base_list)
          that.visit_basic_list = tag_base_list.flat();
          // console.log(that.visit_basic_list)
          // that.basic_label_ary = that.visit_basic_list;

          that.visit_basic_list.forEach(item => {
            // console.log(item)
            item.chooseRadioTag = null;  //单选
            item.chooseCheckTag = [];  //多选
            // item.chooseNumberInput = ''; //数字文本
            // item.chooseInput = '';//文字
            item.tagBaseOptionBeanList.forEach(val => {
              if (val.doctorChoose === true) {
                if (item.tagType === 'radio') {
                  item.chooseRadioTag = val.id;
                } else if (item.tagType === 'checkbox') {
                  item.chooseCheckTag.push(val.id)
                }
              }
            });
            if (item.tagType === 'number' || item.tagType === 'text') {
              if (item.tagBaseOptionBeanList.length && item.tagBaseOptionBeanList[0].doctorChoose == true) {
                item.optionName = item.tagBaseOptionBeanList.length ? item.tagBaseOptionBeanList[0].optionName : '';
                item.optionId = item.tagBaseOptionBeanList.length ? item.tagBaseOptionBeanList[0].id : '';
              }
            }
            // else if(item.tagType === 'text'){
            //   item.chooseInput = val.optionName;
            // }
          });


          // that.basic_label_ary.forEach(item=>{
          //   console.log(item)
          //   item.chooseRadioTag = null;  //单选
          //   item.chooseCheckTag = [];  //多选
          //   item.chooseNumberInput = ''; //数字文本
          //   item.chooseInput = '';//文字
          //   item.tagBaseOptionBeanList.forEach(val=>{
          //     if(val.doctorChoose === true){
          //       if(item.tagType === 'radio'){
          //         item.chooseRadioTag = val.id;
          //       }else if(item.tagType === 'checkbox'){
          //         item.chooseCheckTag.push(val.id)
          //       }else if(item.tagType === 'number'){
          //         item.chooseNumberInput = val.optionName;
          //       }else if(item.tagType === 'text'){
          //         item.chooseInput = val.optionName;
          //       }
          //     }
          //   });
          // });
        }
      });
    },
    //项目标签
    get_product_label() {
      let that = this;
      api.visit_result_product_label = {
        url: api.visit_result_product_label_url + '?doctorId=' + this.doctor_info.doctorId + '&repId=' + this.user_info.repId + '&productId=' + this.visit_project_purpose.project_id,
        method: api.visit_result_product_label.method
      };
      baseAjax(api.visit_result_product_label, '', (res) => {
        if (res.code === statusCode.success) {
          that.visit_product_basic_list = res.data.length ? res.data[0].tagProductList : [];
          // that.product_label_ary = that.visit_product_basic_list;

          that.visit_product_basic_list.forEach(item => {
            item.chooseProductRadioTag = null;
            item.chooseProductCheckTag = [];
            // item.chooseProductNumberInput = '';
            // item.chooseProductInput = '';
            item.tagProductOptionBeanList.forEach(val => {
              if (val.doctorChoose === true) {
                if (item.tagType === 'radio') {
                  item.chooseProductRadioTag = val.id;
                } else if (item.tagType === 'checkbox') {
                  item.chooseProductCheckTag.push(val.id)
                }
              }
            });
            if (item.tagType === 'number' || item.tagType === 'text') {
              if (item.tagProductOptionBeanList.length && item.tagProductOptionBeanList[0].doctorChoose == true) {
                item.optionName = item.tagProductOptionBeanList.length ? item.tagProductOptionBeanList[0].optionName : '';
                item.optionId = item.tagProductOptionBeanList.length ? item.tagProductOptionBeanList[0].id : '';
              }
            }
            // else if(item.tagType === 'text'){
            //   item.chooseProductInput = val.optionName;
            // }
          });


          // that.product_label_ary.forEach(item=>{
          //   item.chooseProductRadioTag = null;
          //   item.chooseProductCheckTag = [];
          //   item.chooseProductNumberInput = '';
          //   item.chooseProductInput = '';
          //   item.tagProductOptionBeanList.forEach(val=>{
          //     if(val.doctorChoose === true){
          //       if(item.tagType === 'radio'){
          //         item.chooseProductRadioTag = val.id;
          //       }else if(item.tagType === 'checkbox'){
          //         item.chooseProductCheckTag.push(val.id)
          //       }else if(item.tagType === 'number'){
          //         item.chooseProductNumberInput = val.optionName;
          //       }else if(item.tagType === 'text'){
          //         item.chooseProductInput = val.optionName;
          //       }
          //     }
          //   });
          // });
        }
      });
    },
    //改变单选下拉框值
    changeRadioTag(val, index) {
      this.visit_basic_list.chooseRadioTag = val;
      this.$forceUpdate();
      this.$set(this.visit_basic_list);
    },
    //改变多选下拉框值
    changeCheckTag(val, index) {
      this.visit_basic_list.chooseCheckTag = val;
      this.$forceUpdate();
      this.$set(this.visit_basic_list);
    },
    //改变基础标签文字/数字
    changeTextInput(val) {
      this.visit_basic_list.optionName = val;
      this.$forceUpdate();
      this.$set(this.visit_basic_list);
    },
    //改变项目单选下拉框值
    changeProductRadioTag(val, index) {
      this.visit_product_basic_list.chooseProductRadioTag = val;
      this.$forceUpdate();
      this.$set(this.visit_product_basic_list);
    },
    //改变项目多选下拉框值
    changeProductCheckTag(val, index) {
      this.visit_product_basic_list.chooseProductCheckTag = val;
      this.$forceUpdate();
      this.$set(this.visit_product_basic_list);
    },
    //改变项目input框值
    changeProductInput(val) {
      this.visit_product_basic_list.optionName = val;
      this.$forceUpdate();
      this.$set(this.visit_product_basic_list);
    },
    //拜访登记接口
    submitVisitRegistration(data) {
      console.log(JSON.stringify(data))
      let supplementPlus = {
        url: '/call_record_info/supplementPlus',
        method: 'POST'
      }
      baseAjax(supplementPlus, data, (res) => {
        if (res.code == statusCode.success) {
          this.$store.state.calls.sinToken = '';
          this.$alert('保存成功').then(res => {
            if (res === 'confirm') {
              this.is_add_info = false;
              this.$router.push('/my_customer');
            }
          });
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.call_info {
  width: 100%;
  font-family: PingFangSC-Medium, PingFang SC;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  margin-top:21px;

  .call_top {
    width: 100%;
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom:4px;
    background-color: #FFFFFF;
    border-radius: 2px;
    padding:0 24px;
    box-sizing:border-box;
    .time{
      display:flex;
      align-items:center;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      img{
        margin-right:11px;
      }
    }
    .btn{
      .el-button{
        width: 70px;
        height: 32px;
        border-radius: 2px;
        border:0;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        display:flex;
        justify-content:center;
        align-items:center;
      }
      .link{
        background-color:rgba(241, 51, 51, 1);
        background-image:url('../../assets/common/hang_out.svg');
        background-repeat:no-repeat;
        background-position:7px center;
        padding-left:32px;
        box-sizing:border-box;
      }
      .hang{
        background-color: rgba(158, 158, 158, 0.6);
      }
    }
  }

  .call_contain {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .contain_left {
      width:58%;
      margin-right: 16px;
      overflow: auto;
      height: 806px;
      background-color: #FFFFFF;
      border-radius: 2px;
      /deep/.el-tabs{
        .el-tabs__header{
          height:46px;
          margin-bottom:20px;
          .el-tabs__nav-wrap{
            height: 100%;
            .el-tabs__nav-scroll{
              height: 100%;
              .el-tabs__nav{
                height: 100%;
                padding-left:24px;
                box-sizing:border-box;
                .el-tabs__item{
                  font-size: 16px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #000000;
                  height: 100%;
                  padding-top:7px;
                  box-sizing:border-box;
                }
                .el-tabs__item.is-active{
                  color:rgba(42, 130, 226, 1);
                }
                .el-tabs__active-bar{
                  margin-left:24px;
                  height: 3px;
                  background-color: rgba(42, 130, 226, 1);
                  border-radius: 4px;
                }
              }
            }
          }
          .el-tabs__nav-wrap::after{
            height:1px;
            background-color:rgba(238, 240, 243, 1);
          }
        }
        .el-tabs__content{
          .el-steps {
            height: 55px;
            background-color: #F8F9FB;
            border-radius: 5px;
            padding: 14px 16px;
            box-sizing: border-box;

            .el-step {
              .el-step__head {
                display: none;
              }

              .el-step__main {
                position: relative;

                .el-step__title {
                  font-size: 14px;
                  font-weight: 400;
                  color: #8998AC;
                  width: 90px;
                  height: 28px;
                  background-color: #FFFFFF;
                  border-radius: 5px;
                  border: 1px solid #C1C9D4;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }

                .el-step__title.is-finish {
                  color: #fff;
                  background-color: #409EFF;
                  border-color: #409EFF;
                }

                .el-step__description {
                  display: flex;
                  position: absolute;
                  left: 65%;
                  top: 63%;

                  span {
                    display: block;
                    width: 4px;
                    height: 4px;
                    background-color: #b8bbbf;
                    border-radius: 50%;
                    margin-right: 7px;
                  }
                }

                .el-step__description.is-finish span {
                  background-color: #409EFF;
                }
              }
            }
          }

          .wechat_info {
            margin: 15px 0;

            .wx_chat_record {
              width: 100%;
              height: 434px;
              background-color: #F8F9FB;
              border-radius: 5px;
              position: relative;
              display: flex;
              flex-direction: column;

              .content {
                margin: 10px 0px 10px 15px;
                padding-right: 15px;
                overflow: auto;
                box-sizing: border-box;

                .main {
                  margin-bottom: 12px;

                  .talk_content {
                    display: flex;
                    align-items: center;

                    .user_name {
                      display: inline-flex;
                      justify-content: center;
                      align-items: center;
                      width: 40px;
                      height: 40px;
                      background-color: #3B7CFF;
                      border-radius: 50%;
                      font-size: 17px;
                      font-family: PingFangSC-Semibold, PingFang SC;
                      font-weight: 500;
                      color: #FFFFFF;
                      margin-right: 12px;
                    }

                    .talk {
                      display: inline-flex;
                      align-items: center;
                      background-color: #FFFFFF;
                      border-radius: 8px;
                      padding: 10px 16px 10px 16px;
                      border: 1px solid #E6EDFE;
                      box-sizing: border-box;
                      font-size: 14px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #2B3A4F;
                      position: relative;

                      .el-link.el-link--default:hover {
                        color: #606266;
                      }

                      .audio {
                        display: flex;
                        align-items: center;
                        transform: translateX(-20px);

                        .small {
                          width: 20px;
                          height: 14px;
                          border-style: solid;
                          border-top-color: transparent;
                          border-left-color: transparent;
                          border-bottom-color: transparent;
                          border-radius: 50%;
                          box-sizing: border-box;
                          vertical-align: middle;
                          display: inline-block;
                          color: #A2A2A2;
                        }

                        .middle {
                          width: 30px;
                          height: 24px;
                          border-style: solid;
                          border-top-color: transparent;
                          border-left-color: transparent;
                          border-bottom-color: transparent;
                          border-radius: 50%;
                          box-sizing: border-box;
                          vertical-align: middle;
                          display: inline-block;
                          margin-left: -22px;
                          animation: show2 3s ease-in-out infinite;
                          opacity: 1;
                          color: #A2A2A2;
                        }

                        @keyframes show2 {
                          0% {
                            opacity: 0;
                          }
                          30% {
                            opacity: 1;
                          }
                          100% {
                            opacity: 0;
                          }
                        }

                        .cricleplay {
                          width: 100%;
                          margin-right: 23px;
                        }

                        .large {
                          width: 40px;
                          height: 34px;
                          border-style: solid;
                          border-top-color: transparent;
                          border-left-color: transparent;
                          border-bottom-color: transparent;
                          border-top-color: transparent;
                          border-radius: 50%;
                          box-sizing: border-box;
                          vertical-align: middle;
                          display: inline-block;
                          margin-left: -32px;
                          animation: show3 3s ease-in-out infinite;
                          opacity: 1;
                          color: #A2A2A2;
                        }

                        @keyframes show3 {
                          0% {
                            opacity: 0;
                          }
                          60% {
                            opacity: 1;
                          }
                          100% {
                            opacity: 0;
                          }
                        }

                        .stopanimate {
                          animation-name: none;
                        }
                      }
                    }

                    .talk::before {
                      content: "";
                      width: 0px;
                      height: 0px;
                      border-top: 8px solid transparent;
                      border-left: 30px solid transparent;
                      border-right: 8px solid #E6EDFE;
                      border-bottom: 8px solid transparent;
                      position: absolute;
                      left: -38px;
                    }

                    .talk::after {
                      content: "";
                      width: 0px;
                      height: 0px;
                      border-top: 8px solid transparent;
                      border-left: 30px solid transparent;
                      border-right: 8px solid #FFFFFF;
                      border-bottom: 8px solid transparent;
                      position: absolute;
                      left: -37px;
                    }
                  }

                  .talk_time {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #8998AC;
                    margin-left: 53px;
                    margin-top: 4px;
                  }

                  .main_doubt {
                    background-color: #FFFFFF;
                    border-radius: 5px;
                    border: 1px solid #E6EDFE;
                    font-size: 13px;
                    font-weight: 400;
                    color: #2B3A4F;
                    padding: 20px 9px 10px;
                    display: inline-flex;
                    position: relative;
                    margin-left: 52px;

                    .doubt_title {
                      background-color: #EB464F;
                      border-radius: 2px;
                      padding: 1px 3px;
                      font-size: 10px;
                      font-weight: 500;
                      color: #FFFFFF;
                      position: absolute;
                      top: 0;
                      left: 0;

                    }
                  }
                }

                .main_right {
                  margin-bottom: 12px;
                  display: flex;
                  flex-direction: column;

                  .talk_content_right {
                    align-self: flex-end;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;

                    .user_name_right {
                      display: inline-flex;
                      justify-content: center;
                      align-items: center;
                      width: 40px;
                      height: 40px;
                      background-color: #27DAAD;
                      border-radius: 50%;
                      font-size: 17px;
                      font-family: PingFangSC-Semibold, PingFang SC;
                      font-weight: 500;
                      color: #FFFFFF;
                      margin-left: 12px;
                    }

                    .talk_right {
                      display: inline-flex;
                      align-items: center;
                      background-color: #E6EDFE;
                      border-radius: 8px;
                      padding: 10px 16px 10px 16px;
                      border: 1px solid #E6EDFE;
                      box-sizing: border-box;
                      font-size: 14px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #2B3A4F;
                      position: relative;

                      .el-link.el-link--default:hover {
                        color: #606266;
                      }

                      .audio {
                        display: flex;
                        align-items: center;
                        transform: translateX(-20px);

                        .small {
                          width: 20px;
                          height: 14px;
                          border-style: solid;
                          border-top-color: transparent;
                          border-left-color: transparent;
                          border-bottom-color: transparent;
                          border-radius: 50%;
                          box-sizing: border-box;
                          vertical-align: middle;
                          display: inline-block;
                          color: #A2A2A2;
                        }

                        .middle {
                          width: 30px;
                          height: 24px;
                          border-style: solid;
                          border-top-color: transparent;
                          border-left-color: transparent;
                          border-bottom-color: transparent;
                          border-radius: 50%;
                          box-sizing: border-box;
                          vertical-align: middle;
                          display: inline-block;
                          margin-left: -22px;
                          animation: show2 3s ease-in-out infinite;
                          opacity: 1;
                          color: #A2A2A2;
                        }

                        @keyframes show2 {
                          0% {
                            opacity: 0;
                          }
                          30% {
                            opacity: 1;
                          }
                          100% {
                            opacity: 0;
                          }
                        }

                        .cricleplay {
                          width: 100%;
                          margin-right: 23px;
                        }

                        .large {
                          width: 40px;
                          height: 34px;
                          border-style: solid;
                          border-top-color: transparent;
                          border-left-color: transparent;
                          border-bottom-color: transparent;
                          border-top-color: transparent;
                          border-radius: 50%;
                          box-sizing: border-box;
                          vertical-align: middle;
                          display: inline-block;
                          margin-left: -32px;
                          animation: show3 3s ease-in-out infinite;
                          opacity: 1;
                          color: #A2A2A2;
                        }

                        @keyframes show3 {
                          0% {
                            opacity: 0;
                          }
                          60% {
                            opacity: 1;
                          }
                          100% {
                            opacity: 0;
                          }
                        }

                        .stopanimate {
                          animation-name: none;
                        }
                      }
                    }

                    .talk_right::before {
                      content: "";
                      width: 0px;
                      height: 0px;
                      border-top: 8px solid transparent;
                      border-left: 8px solid #E6EDFE;
                      border-right: 8px solid transparent;
                      border-bottom: 8px solid transparent;
                      position: absolute;
                      right: -16px;
                    }
                  }

                  .talk_time_right {
                    align-self: flex-end;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #8998AC;
                    margin-right: 53px;
                    margin-top: 4px;
                  }

                  .main_right_doubt {
                    background-color: #FFFFFF;
                    border-radius: 5px;
                    border: 1px solid #E6EDFE;
                    font-size: 13px;
                    font-weight: 400;
                    color: #2B3A4F;
                    padding: 20px 9px 10px;
                    display: inline-flex;
                    position: relative;
                    margin-right: 52px;
                    align-self: flex-end;

                    .doubt_right_title {
                      background-color: #FFB700;
                      border-radius: 2px;
                      padding: 1px 3px;
                      font-size: 10px;
                      font-weight: 500;
                      color: #FFFFFF;
                      position: absolute;
                      top: 0;
                      left: 0;
                    }
                  }
                }

                .talk_flex {
                  flex: 1;
                }

                .talk_image {
                  width: 20%;
                  height: 20%;

                  .el-image-viewer__wrapper {
                    .el-image-viewer__close {
                      color: #fff;
                    }
                  }
                }

                .talk_link {
                  width: 230px;

                  .el-link {
                    width: 100%;

                    .el-link--inner {
                      width: 100%;

                      h4 {
                        margin-top: 0;
                        margin-bottom: 13px;
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                      }

                      .description {
                        display: flex;

                        div {
                          width: 142px;
                          height: 40px;
                          margin-right: 10px;
                          font-size: 12px;
                          color: #a5a5a5;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          display: -webkit-box;
                          -webkit-box-orient: vertical;
                          -webkit-line-clamp: 3;
                        }

                        img {
                          width: 42px;
                          height: 42px;
                        }
                      }
                    }
                  }
                }

                .talk_audio {
                  height: 37px;
                  cursor: pointer;
                }

                /deep/ .el-textarea {
                  .el-textarea__inner {
                    resize: none;
                    height: 59px;
                    background-color: #FFFFFF;
                    border-radius: 4px;
                    border: 1px solid #E6EDFE;
                  }
                }
              }

              .content::-webkit-scrollbar {
                display: none;
              }
            }
          }

          .add_call_info {
            width: 100%;
            height: 434px;
            background-color: #F8F9FB;
            border-radius: 5px;
            margin: 15px 0;

            h4 {
              font-size: 14px;
              font-weight: 500;
              color: #2B3A4F;
              margin: 0 0 0 19px;
              padding-top: 16px;
              box-sizing: border-box;
            }

            .line {
              width: 100%;
              height: 1px;
              background-color: #dedfe2;
              margin-left: 0;
              margin-top: 14px;
            }

            .add_info {
              height: 375px;
              padding: 0 22px 0 19px;
              box-sizing: border-box;
              overflow: auto;
              margin-top: 7px;

              ul {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

                li {
                  margin-bottom: 19px;
                  display: flex;

                  .text {
                    font-size: 14px;
                    font-weight: 400;
                    color: #2B3A4F;
                    width: 98px;
                    display: inline-flex;
                    justify-content: space-between;
                  }
                }

                li:first-child {
                  align-items: center;

                  /deep/ .el-select {
                    .el-input {
                      .el-input__inner {
                        width: 200px;
                        height: 32px;
                        border-radius: 5px;
                        border: 1px solid #C1C9D4;
                      }

                      .el-input__suffix {
                        .el-input__suffix-inner {
                          .el-input__icon {
                            line-height: 32px;
                          }
                        }
                      }
                    }
                  }
                }

                li:nth-child(2) {
                  .text {
                    margin-top: 6px;
                  }

                  /deep/ .el-checkbox-group {
                    display: flex;

                    .el-checkbox {
                      margin-right: 10px;
                      background-color: #FFFFFF;
                      border-radius: 5px;
                      border: 1px solid #C1C9D4;
                      font-size: 14px;
                      font-weight: 400;
                      color: #8998AC;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      position: relative;

                      .el-checkbox__input {
                        position: absolute;
                        right: 0;
                        bottom: -2px;

                        .el-checkbox__inner {
                          border-color: transparent;
                          background-color: transparent;
                        }

                        .el-checkbox__inner::after {
                          width: 6px;
                          height: 10px;
                          left: -1px;
                          top: -2px;
                        }
                      }

                      .el-checkbox__input.is-checked .el-checkbox__inner {
                        border: 10px solid transparent;
                        border-right: 10px solid #3B7CFF;
                        border-bottom: 10px solid #3B7CFF;
                        border-bottom-left-radius: 0;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 5px;
                        width: 0;
                        background-color: transparent;
                      }

                      .el-checkbox__input.is-checked + .el-checkbox__label {
                        color: #3B7CFF;
                      }

                      .el-checkbox__label {
                        padding-left: 0;
                      }
                    }

                    .el-checkbox.is-bordered.is-checked {
                      border-color: #3B7CFF;
                    }

                    .el-checkbox.is-bordered {
                      padding: 0 16px;
                      height: 32px;
                    }
                  }
                }

                li:nth-child(3) {
                  align-items: center;
                }

                li:nth-child(4) {
                  /deep/ .el-radio {
                    .el-radio__input {
                      .el-radio__inner {
                        position: relative;
                      }

                      .el-radio__inner::after {
                        width: 9px;
                        height: 6px;
                        border: 1px solid #fff;
                        border-width: 0 0 2px 2px;
                        transform: rotate(-45deg);
                        vertical-align: baseline;
                        position: absolute;
                        left: 16%;
                        top: 16%;
                        border-radius: 0;
                        background-color: transparent;
                      }
                    }

                    .el-radio__input.is-checked .el-radio__inner {
                      border-color: #3B7CFF;
                      background-color: #3B7CFF;
                    }

                    .el-radio__input.is-checked + .el-radio__label {
                      color: #3B7CFF;
                    }
                  }
                }

                li:nth-child(5) {
                  align-items: center;

                  /deep/ .el-date-editor {
                    .el-input__inner {
                      width: 206px;
                      height: 32px;
                      border-radius: 5px;
                      border: 1px solid #C1C9D4;
                    }

                    .el-input__prefix {
                      .el-input__icon {
                        line-height: 32px;
                      }
                    }

                    .el-input__suffix {
                      transform: translateX(-13px);

                      .el-input__suffix-inner {
                        .el-input__icon {
                          line-height: 32px;
                        }
                      }
                    }
                  }
                }

                li:nth-child(6) {
                  .text {
                    margin-top: 7px;
                  }

                  /deep/ .el-textarea {
                    width: 0;

                    .el-textarea__inner {
                      resize: none;
                      width: 433px;
                      height: 68px;
                      border-radius: 4px;
                      border: 1px solid #E6EDFE;
                    }
                  }
                }

                li:last-child {
                  justify-content: center;

                  .el-button {
                    width: 98px;
                    height: 36px;
                    background-color: #3B7CFF;
                    border-radius: 4px;
                    font-size: 16px;
                    font-weight: 400;
                    color: #FFFFFF;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }
                }
              }
            }

            .add_info::-webkit-scrollbar {
              display: none;
            }
          }

          .question_survey, .visit_result {
            .title {
              font-size: 14px;
              font-weight: 500;
              color: #2B3A4F;
              padding: 16px 0 0 19px;
              box-sizing: border-box;
            }

            .line {
              width: 100%;
              height: 1px;
              background-color: #e0e0e0;
              margin-top: 14px;
            }
          }

          .question_survey {
            .el-tabs {
              box-sizing: border-box;

              .el-tabs__header {
                margin-bottom: 24px;
                height:24px;

                .el-tabs__nav-wrap {
                  .el-tabs__nav-scroll {
                    .el-tabs__nav {
                      display: flex;

                      .el-tabs__active-bar {
                        background-color: transparent;
                      }

                      .el-tabs__item {
                        height: 24px;
                        border-radius: 2px;
                        background-color: #FFFFFF;
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(0, 0, 0, 0.7);
                        border: 1px solid #DDDFE6;
                        padding: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 16px;
                        padding: 0 10px;
                      }

                      .el-tabs__item:hover{
                        color: #2A82E2;
                      }

                      .el-tabs__item.is-active {
                        background-color: rgba(42, 130, 226, 1);
                        color: #fff;
                        border:0;
                      }
                    }
                  }
                }

                .el-tabs__nav-wrap::after {
                  background-color: transparent !important;
                  height: 0;
                  width: 0;
                }
              }

              .el-tabs__content {
                padding-left:24px;
                box-sizing:border-box;
                .el-tab-pane {
                  .el-input.el-input--suffix.is-focus>.el-input__inner{
                    border-color:#2A82E2 !important;
                  }
                  .el-range-editor.is-active{
                    border-color:#2A82E2 !important;
                  }
                  .el-input__inner:focus{
                    border-color:#2A82E2 !important;
                  }
                  .el-textarea__inner:focus{
                    border-color:#2A82E2 !important;
                  }
                  .options {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.9);

                    .text_input, .number_input, .radio_select, .checkbox_select {
                      display: flex;
                      align-items: center;
                      margin-bottom: 12px;
                    }

                    .text_input {
                      .el-input {
                        width: 0;

                        .el-input__inner {
                          width: 320px;
                          height: 32px;
                          border-radius: 2px;
                          border: 1px solid #DDDFE6;
                        }
                      }
                    }

                    .number_input {
                      .el-input {
                        width: 0;

                        .el-input__inner {
                          width: 160px;
                          height: 32px;
                          border-radius: 2px;
                          border: 1px solid #DDDFE6;
                        }
                      }
                    }

                    .radio_select {
                      .el-select {
                        .el-input {
                          .el-input__inner {
                            width: 160px;
                            height: 32px;
                            border-radius: 2px;
                            border: 1px solid #DDDFE6;
                          }

                          .el-input__suffix {
                            .el-input__suffix-inner {
                              .el-input__icon {
                                line-height: 32px;
                              }
                            }
                          }
                        }
                      }
                    }

                    .checkbox_select {
                      .el-select {
                        margin-left:0 !important;
                        .el-input {
                          .el-input__inner {
                            width: 320px;
                            height: 32px;
                            border-radius: 2px;
                            border: 1px solid #DDDFE6;
                          }

                          .el-input__suffix {
                            .el-input__suffix-inner {
                              .el-input__icon {
                                line-height: 32px;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .visit_result {
            font-size: 14px;
            font-weight: 400;
            color: #2B3A4F;
            padding-bottom: 24px;
            .el-input.el-input--suffix.is-focus>.el-input__inner{
              border-color:#2A82E2 !important;
            }
            .el-range-editor.is-active{
              border-color:#2A82E2 !important;
            }
            .el-input__inner:focus{
              border-color:#2A82E2 !important;
            }
            .el-textarea__inner:focus{
              border-color:#2A82E2 !important;
            }

            .add_visit_record {
              padding-left:14px;
              box-sizing: border-box;

              ul {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.9);
                li {
                  margin-bottom: 14px;
                  display: flex;
                  .text{
                    display:inline-block;
                    width:112px;
                  }

                  .purpose {
                    display: flex;

                    .mandatory {
                      margin-top: 2px;
                      margin-right:2px;
                      color:rgba(246, 92, 68, 1);
                    }
                  }
                }

                li:not(:first-child) {
                  align-items: center;

                  .result, .doctor_attitude, .withae {
                    display: flex;

                    .mandatory {
                      margin-top: 2px;
                      margin-right:2px;
                      color:rgba(246, 92, 68, 1);
                    }
                  }
                }

                li:first-child{
                  align-items:center;
                  .purpose_text{
                    display:flex;
                    align-items:center;
                    width: 376px;
                    height: 32px;
                    background-color: #F7F8FA;
                    border-radius: 2px;
                    border: 1px solid #DDDFE6;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #C0C4CC;
                    padding-left:14px;
                    box-sizing:border-box;
                  }
                }

                li:nth-child(2) {
                  margin-bottom: 0;

                  .result {
                    align-self: flex-start;
                    padding-top: 6px;
                  }

                  .el-checkbox-group {
                    .el-checkbox {
                      position: relative;
                      background-color: #fff;
                      margin-bottom: 15px;
                      margin-right: 17px;
                      font-size: 14px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #666666;

                      .el-checkbox__input {
                        display:none;
                        position: absolute;
                        right: 0;
                        bottom: -2px;

                        .el-checkbox__inner {
                          border-color: transparent;
                        }

                        .el-checkbox__inner::after {
                          width: 6px;
                          height: 10px;
                          left: -1px;
                          top: -2px;
                        }
                      }

                      .el-checkbox__input.is-checked .el-checkbox__inner {
                        border: 10px solid transparent;
                        border-right: 10px solid #409EFF;
                        border-bottom: 10px solid #409EFF;
                        border-bottom-left-radius: 0;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 4px;
                        width: 0;
                        background-color: transparent;
                      }

                      .el-checkbox__input.is-checked + .el-checkbox__label {
                        color: #FFFFFF;
                      }

                      .el-checkbox__input.is-disabled .el-checkbox__inner{
                        background-color:transparent;
                      }

                      .el-checkbox__label {
                        transform: translateY(-4px);
                        font-size: 14px;
                        font-weight: 400;
                        color: #8998AC;
                      }
                    }

                    .el-checkbox.is-bordered {
                      height: 32px;
                      border-radius: 2px;
                      border: 1px solid #DDDFE6;
                    }

                    .el-checkbox.is-bordered:hover>.el-checkbox__label{
                      color: #2A82E2;
                    }

                    .el-checkbox.is-bordered.is-checked {
                      border-color: transparent;
                      background-color: rgba(42, 130, 226, 1);
                    }

                    .el-checkbox.is-bordered.is-checked>.el-checkbox__label{
                      color:#fff;
                    }

                    .el-checkbox.is-bordered + .el-checkbox.is-bordered {
                      margin-left: 0;
                    }

                    .el-checkbox.is-disabled.is-bordered{
                      background-color: rgba(240, 242, 245, 0.6);
                    }

                    .el-checkbox.is-disabled.is-bordered>.el-checkbox__label{
                      color: #C0C4CC;
                    }
                  }
                }

                li:nth-child(4) {
                  .el-select {
                    width: 250px;
                    .el-input {
                      width:100%;
                      .el-input__inner {
                        width:100%;
                        height: 32px;
                        background-color: #FFFFFF;
                        border-radius: 2px;
                        border: 1px solid #DDDFE6;
                      }

                      .el-input__suffix {
                        .el-input__suffix-inner {
                          .el-input__icon {
                            line-height: 32px;
                          }
                        }
                      }
                    }
                  }
                }

                li:nth-child(5){
                  padding-left: 8px;
                  box-sizing:border-box;
                  .el-input{
                    width:250px;
                    .el-input__inner{
                      width:100%;
                      height: 32px;
                      background-color: #FFFFFF;
                      border-radius: 2px;
                      border: 1px solid #DDDFE6;
                    }
                  }
                }

                li:nth-last-child(2) {
                  padding-left: 8px;
                  box-sizing:border-box;

                  .el-date-editor {
                    width: 250px;
                    .el-input__inner {
                      width:100%;
                      height: 32px;
                      background-color: #FFFFFF;
                      border-radius: 2px;
                      border: 1px solid #DDDFE6;
                    }

                    .el-input__prefix {
                      .el-input__icon {
                        line-height: 32px;
                      }
                    }

                    .el-input__suffix {
                      .el-input__suffix-inner {
                        .el-input__icon {
                          line-height: 32px;
                        }
                      }
                    }
                  }
                }

                li:last-child {
                  padding-left: 8px;
                  box-sizing:border-box;
                  .remark_text {
                    margin-top: -63px;
                  }

                  .el-textarea {
                    width:500px;
                    .el-textarea__inner {
                      resize: none;
                      height: 100px;
                      width:100%;
                      border-radius: 2px;
                      border: 1px solid #DDDFE6;
                    }
                  }
                }
              }
            }

            .submit {
              width: 100%;
              display: flex;
              margin-top:48px;
              padding-left:24px;
              box-sizing:border-box;

              .disabled_submit {
                background-color: #c8c9cc;
                border-color: #c8c9cc;
                cursor: default;
              }

              .el-button{
                height: 32px;
                background-color: #2A82E2;
                border-radius: 2px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.9);
                display:flex;
                justify-content:center;
                align-items:center;
                padding:6px 18px;
                box-sizing:border-box;
                border-color:transparent;
              }

              .el-button:hover{
                background-color: rgba(42, 130, 226, 0.7);
              }

              .el-button:active{
                background-color: #1F6DC3;
              }
            }
          }
        }
      }
    }

    .contain_left::-webkit-scrollbar {
      display: none;
    }

    .contain_right {
      flex:1;
      width: 40%;

      .basic_info {
        padding: 27px 24px 0;
        background-color:#fff;
        border-radius: 2px;
        height:806px;
        /deep/.el-tabs .el-tabs__content .el-tab-pane .basic_content{
          min-height: 552px;
          max-height: 552px;
        }
        /deep/.el-tabs .el-tabs__content .el-tab-pane .wechat_box{
          min-height:507px;
            max-height:507px;
        }
      }
    }
  }
}

.el-select-dropdown__item {
  padding-left: 20px;
}
</style>
